<template>
  <view class="vip" v-if="vip && vip.n">
    <view class="text">开通VIP, {{vip.n}}大权益, 平均可省{{vip.money}}/年</view>
    <view class="btn" @click="goVip">立即开通</view>
  </view>
</template>

<script>

export default {
  props: ['vip'],
  data() {
    return {
    }
  },
  methods: {
    goVip() {
      uni.navigateTo({
        url: '/sub_main/vip/vip'
      })
    },
  }
}

</script>

<style scoped lang="scss">
.vip {
  height: 100rpx;
  background: #323232;
  position: absolute;
  left: 10rpx;
  right: 10rpx;
  top: -80rpx;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 0 20rpx;
  align-items: center;
  .text {
    color: #ffdda7;
    font-size: 24rpx;
  }
  .btn {
    background: #ffebb0;
    color: #563418;
    border-radius: 20rpx;
    padding: 10rpx 20rpx;
    font-size: 28rpx;
    font-weight: 700;
  }
}
</style>
